
import styled from "styled-components";
import Button from "@mui/material/Button";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import { connect } from "react-redux";
import { addTag, selectTag } from "../../redux/action";
import iconHash from "Iconlibs/hash";
import { ThemeProvider } from "@mui/material/styles";
import { tabstheme } from "themes";
const NoteTags = (props: any) => {
  const { tagListProp } = props.value;
  const addTag = props.addTag;
  const selectTag = props.selectTag;
  const note = props.note;
  const onAddTag = () => {
    const _tagname = window.prompt("请输入标签名");
    if (_tagname !== null) {
      const _tag: TagType = {
        tagName: _tagname,
        TagIcon: "LoyaltyIcon",
      };

      addTag(_tag, note.category);
    }
  };
  const getClass = (tag: TagType) =>
    note.selectedTag.indexOf(tag) >= 0 ? "selected" : "";
  const onToggleTag = (tag: TagType) => {
    console.log("hi");

    const index = note.selectedTag.indexOf(tag);

    if (index >= 0) {
      selectTag([...note.selectedTag.filter((t: any) => t !== tag)]);
    } else {
      selectTag([...note.selectedTag, tag]);
    }
  };
  const NoteTagsWrapper = styled.div`
    margin-top: 15px;
    flex-grow: 1;
    > ul {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;

      li {
        margin: 5px 10px;
        &.selected {
          .icon-wrapper{
            background-color: #ffd64e;
            svg{
              >path{
                fill: white;
              }
              
            }
          }
          
        }
      }
    }
    flex-grow: 1;
  `;
  const TagChip = (props: any) => {
    const { tagName, _className } = props.value;

    const Wrapper = styled.li`
      
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      border-radius: 3px;
     
     
      .tag {
        margin: 0 8px;
        color: #888888;
      }
      .icon-wrapper{
        padding: 8px 10px;
        background-color: #e7e7e7;
        border-radius: 8px;
        margin-bottom: 3px;
        svg {
        width: 20px;
        height: 20px;
      }
      }
     
    `;
    return (
      <Wrapper className={_className}>
        <div className="icon-wrapper">
        {props.children}
        </div>
        
        <div className="tag">{tagName}</div>
      </Wrapper>
    );
  };

  return (
    <NoteTagsWrapper>
      <ul>
        {tagListProp.map((tag: TagType) => {
          const _TagIcon=iconHash[tag.TagIcon] 
          return (
            <div
              onClick={() => {
                onToggleTag(tag);
              }}
            >
              <TagChip
                value={{ tagName: tag.tagName, _className: getClass(tag) }}
              >
                <_TagIcon />
              </TagChip>
            </div>
          );
        })}
        <li>
        <ThemeProvider theme={tabstheme}>
          <Button
            variant="contained"
            onClick={onAddTag}
            endIcon={<AddCircleIcon />}
          >
            添加
          </Button>
          </ThemeProvider>
        </li>
        
      </ul>
    </NoteTagsWrapper>
  );
};
const mapStateToProps = (state: any) => {
  const note = state.note;

  return { note };
};
export default connect(mapStateToProps, { addTag, selectTag })(NoteTags);
